﻿<!DOCTYPE html>
<html>
<head>
<title>丸子妈妈</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<script src="res/jquery.js"></script>
<script src="fun.js"></script>
<link href="style.css" rel="stylesheet" />
<link href="animate.css" rel="stylesheet" />
</head>
<body>

<script>
$(function(){
	var layout = [
		".talk",
		".taobao_btn",
		".taobao_index",
		".taobao_shop",
		".shop_list_1 .shop_select .shop_self_first i",
		".shop_list_2 .shop_select .shop_self_first i",
		".shop_list_3 .shop_select i",
		".shop_list_box",
		".shop_list_4 .shop_select i",
		".shop_list_5 .shop_select i",
		".shop_list_6 .shop_select i",
		".shop_list",
		".shop_list_1 .shop_select .shop_self_first",
		".shop_list_1 .shop_select .shop_self_second i",
		".shop_list_2 .shop_select .shop_self_first",
		".shop_list_2 .shop_select .shop_self_second i",
		".pop_wechat",
		".pop_wechat_click",
		".message",
		".message_box,.top_pop",
		".shop_list_3 dd",
		".shop_list_3 .shop_del",
		".shop_list_3",
		".shop_list_2 dd",
		".shop_list_2 .shop_del",
		".shop_list_2",
		".shop_list_1 dd",
		".self_box_out",
		".self_box_in",
		".shop_list_1 .shop_del",
		".shop_list_1",
		".tsb_btn",
		".taobao_order",
		".tob_btn",
		".pay_box",
		".pd_btn",
		".taobao_all"
	];
	var timeDelay = [ .5,.4,.4,.8,.5,.5,.5,.4,.4,.4,.4,.4,.9,1.2,.9,1.2,.8,.4,.4,.4,1.5,.4,.4,.4,.4,.4,.4,.9,1.5,.4,.4,.4,.4,.4,.4,.4,.4 ];
	var timeDurat = [ .3,.3,.3,.4,.2,.2,.2,.2,.2,.2,.2,.2,.3, .3,.3, .3,.3,.3,.3,.3, .3,.3,.3,.3,.3,.3,.3,.3, .3,.3,.3,.3,.3,.4,.4,.4,.4 ];
	addAnimate(timeDelay,timeDurat,layout);
	setTimeout(function(){window.parent.nextAnimation('page13.html');},page_total*1000);	
})
</script>

<style>
	.taobao_index{position: absolute; left: 0; width: 100%; top: 0; height: 100%; background-color: #f4f4f4;}
	.ti_top{position: absolute; left: 0; width: 100%; top: 0;}
	.ti_bottom{position: absolute; left: 0; width: 100%; bottom: 0;}
	.ti_middle{position: absolute; left: 0; width: 100%; top: 50px; bottom: 50px;}
	.taobao_order{position: absolute; left: 0; width: 100%; top: 0; height: 100%; background-color: #f4f4f4;}
	.to_top{position: absolute; left: 0; width: 100%; top: 0;}
	.to_bottom{position: absolute; left: 0; width: 100%; bottom: 0; height: 48px; background-color: #fff;}
	.to_middle{position: absolute; left: 0; width: 100%; top: 50px; bottom: 48px; background-position: top;}
	.tob_btn img{float: right; height: 48px;}
	
	.taobao_shop{position: absolute; left: 0; width: 100%; top: 0; height: 100%; background-color: #f4f4f4;}
	.ts_top{position: absolute; left: 0; width: 100%; top: 0;}
	.ts_bottom{position: absolute; left: 0; width: 100%; bottom: 0;}
	.tsb_btn_box{padding: 6px; overflow: hidden; background: linear-gradient(to right, rgba(255,255,255,0), #fff);}
	.tsb_btn{float: right; padding: 0 24px; line-height: 40px; background: linear-gradient(to right, #f09436, #eb5d2a); border-radius: 25px; font-size: 14px; color: #fff;}
	
	.shop_list_box{position: absolute; left: 0; right: 0; top: 60px; bottom: 40px;}
	.shop_list dl{overflow: hidden; padding-top: 16px;; margin: 14px 14px 0; background-color: #fff; border-radius: 8px; position: relative; left: 0;}
	.shop_list dd{padding-bottom: 16px; position: relative; min-height: 80px;}
	.shop_select{float: left; width: 40px; height: 80px; position: relative;}
	.shop_select s{width: 16px; height: 16px; border: 1px solid #ccc; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-left: -9px; margin-top: -18px;}
	.shop_select i{position: absolute; width: 18px; height: 18px; left: -1px; top: -1px; border-radius: 50%; background-color: #f50; background-image: url(img/taobao/select.png); background-size: 9px 6px; opacity: 0;}
	.shop_img{float: left; width: 80px; height: 80px;}
	.shop_detail{margin-left: 134px; margin-right: 16px; font-size: 12px;}
	.shop_detail h2{color: #666; line-height: 1.4;}
	.shop_detail h4{color: #999; padding: 8px 0;}
	.shop_detail h3{color: #f60;}
	.shop_del{position: absolute; top: 0; height: 102px; right: -50px; width: 50px; line-height: 102px; font-size: 12px; color: #fff; background-color: #f32; text-align: center;}
	.shop_bottom{height: 44px; background-color: #fff; line-height: 44px; font-size: 14px; position: absolute; bottom: 0; width: 100%; left: 0; border-top: 1px solid #eee;}
	.shop_store{padding-left: 40px; padding-bottom: 10px;}
	.shop_store s{width: 18px; height: 14px; background-image: url(img/taobao/cat.png); vertical-align: middle; display: inline-block; margin-right: 10px;}
	.shop_store em{vertical-align: middle;  font-size: 12px; color: #333;}
</style>

<style>
	.talk{animation-name: window_hidden;}
	.taobao_btn{animation-name: btn_click;}
	.taobao_index{top: 100%; animation-name: window_up;}
	.taobao_shop{top: 100%; animation-name: window_up;}
	.shop_list_1 .shop_select .shop_self_first i{animation-name: fadein;}
	.shop_list_2 .shop_select .shop_self_first i{animation-name: fadein;}
	.shop_list_3 .shop_select i{animation-name: fadein;}
	.shop_list_box{animation-name: shop_scroll_bottom}
	.shop_list_4 .shop_select i{animation-name: fadein;}
	.shop_list_5 .shop_select i{animation-name: fadein;}
	.shop_list_6 .shop_select i{animation-name: fadein;}
	.shop_list{animation-name: shop_scroll_top}
	.shop_list_1 .shop_select .shop_self_first{animation-name: fadeout;}
	.shop_list_1 .shop_select .shop_self_second i{animation-name: fadein;}
	.shop_list_2 .shop_select .shop_self_first{animation-name: fadeout;}
	.shop_list_2 .shop_select .shop_self_second i{animation-name: fadein;}
	.pop_wechat{ animation-name: pop_show;}
	.pop_wechat_click{animation-name: pop_click;}
	.top_pop{animation-name: fadeout;}
	.message{left: 100%; animation-name: window_show;}
	.message_box{animation-name: window_hidden;}
	.shop_list_1 dd{animation-name: shop_operate;}
	.shop_list_1 .shop_del{animation-name: btn_click;}
	.shop_list_1{overflow: hidden; animation-name: shop_del;}
	.shop_list_2 dd{animation-name: shop_operate;}
	.shop_list_2 .shop_del{animation-name: btn_click;}
	.shop_list_2{overflow: hidden; animation-name: shop_del;}
	.shop_list_3 dd{animation-name: shop_operate;}
	.shop_list_3 .shop_del{animation-name: btn_click;}
	.shop_list_3{overflow: hidden; animation-name: shop_del;}
	.tsb_btn{animation-name: btn_click;}
	.taobao_order{left: 100%; animation-name: window_show;}
	.tob_btn{animation-name: btn_click;}
	.pay_box{left: 100%; animation-name: window_show;}
	.pd_btn{animation-name: btn_click;}
	.taobao_all{animation-name: window_hidden; overflow: hidden;}
	.self_box_out{animation-name: shop_operate_close;}
	.self_box_in{animation-name: shop_operate;}
	
@keyframes shop_operate{
	from { transform: translatex(0); }
	to   { transform: translatex(-50px); }
}
@keyframes shop_operate_close{
	from { transform: translatex(0); }
	to   { transform: translatex(50px); }
}
@keyframes shop_del{
	from { height: 108px; }
	to   { height: 0; padding: 0; margin: 0;}
}
@keyframes shop_scroll_bottom{
	from { transform: translateY(0);}
	to   { transform: translateY(-400px);}
}
@keyframes shop_scroll_top{
	from { transform: translateY(0);}
	to   { transform: translateY(400px);}
}
	
</style>

<div class="out">
	<div class="phone_top"><dl class="time_point_9"></dl></div>
	<div class="lock_panel">
		<ul class="home_main">
			<li><img src="img/home_icon/15.png" /><em>音乐</em></li>
			<li><img src="img/home_icon/6.png" /><em>照片</em></li>
			<li><img src="img/home_icon/7.png" /><em>相机</em></li>
			<li><img src="img/home_icon/8.png" /><em>天气</em></li>
			<li><img src="img/home_icon/9.png" /><em>时钟</em></li>
			<li><img src="img/home_icon/10.png" /><em>地图</em></li>
			<li><img src="img/home_icon/11.png" /><em>视频</em></li>
			<li><img src="img/home_icon/12.png" /><em>备忘录</em></li>
			<li class="remind_btn"><img src="img/home_icon/13.png" /><em>提醒事项</em></li>
			<li><img src="img/home_icon/14.png" /><em>股票</em></li>
			<li><img src="img/home_icon/16.png" /><em>App Store</em></li>
			<li><img src="img/home_icon/17.png" /><em>IBOOKS</em></li>
			<li><img src="img/home_icon/18.png" /><em>健康</em></li>
			<li><img src="img/home_icon/19.png" /><em>设置</em></li>
			<li><img src="img/home_icon/20.png" /><em>SAFARI</em></li>
			<li><img src="img/home_icon/21.png" /><em>邮件</em></li>
			<li class="taobao_btn"><img src="img/home_icon/22.png" /><em>淘宝</em></li>
		</ul>
		<ul class="home_bottom">
			<li><img src="img/home_icon/1.png" /></li>
			<li><img src="img/home_icon/2.png" /></li>
			<li><img src="img/home_icon/3.png" /></li>
			<li><img src="img/home_icon/4.png" /></li>
		</ul>
	</div>
	<div class="out_box taobao_all">
		<div class="taobao_index">
			<div class="ti_middle" style="background-image: url(img/taobao/ti_middle.jpg);"></div>
			<div class="ti_top"><img src="img/taobao/ti_top.jpg" /></div>
			<div class="ti_bottom"><img src="img/taobao/ti_bottom.jpg" /></div>
		</div>
		<div class="taobao_shop">
			<div class="shop_list_box">
				<div class="shop_list">
					<dl class="shop_list_1">
						<div class="shop_store"><s></s><em>Olay官方旗舰店</em></div>
						<dd>
							<div class="self_box_out">
								<div class="self_box_in">
									<div class="shop_select"><s><div class="shop_self_first"><i></i></div><div class="shop_self_second"><i></i></div></s></div>
									<div class="shop_img" style="background-image: url(img/taobao/taobao_1.jpg);"></div>
									<div class="shop_detail">
										<h2>Olay紧致小白瓶水感透白臻粹修护精华露面部精华透白补水保湿</h2>
										<h4>30ML</h4>
										<h3>¥450</h3>
									</div>
									<div class="shop_del">删除</div>
								</div>
							</div>
						</dd>
					</dl>
					<dl class="shop_list_2">
						<div class="shop_store"><s></s><em>夏世文定制女装</em></div>
						<dd>
							<div class="shop_select"><s><div class="shop_self_first"><i></i></div><div class="shop_self_second"><i></i></div></s></div>
							<div class="shop_img" style="background-image: url(img/taobao/taobao_3.jpg);"></div>
							<div class="shop_detail">
								<h2>定制  奶油褶皱雪纺连衣裙夏季喇叭袖首要仙女裙</h2>
								<h4>白色 S</h4>
								<h3>¥399</h3>
							</div>
							<div class="shop_del">删除</div>
						</dd>
					</dl>
					<dl class="shop_list_3">
						<div class="shop_store"><s></s><em>海澜之家官方旗舰店</em></div>
						<dd>
							<div class="shop_select"><s><i></i></s></div>
							<div class="shop_img" style="background-image: url(img/taobao/taobao_5.jpg);"></div>
							<div class="shop_detail">
								<h2>男装2018秋季新款飞行夹克棒球服外套</h2>
								<h4>L码  黑色</h4>
								<h3>¥268</h3>
							</div>
							<div class="shop_del">删除</div>
						</dd>
					</dl>
					<dl class="shop_list_4">
						<div class="shop_store"><s></s><em>巴拉巴拉官方旗舰店</em></div>
						<dd>
							<div class="shop_select"><s><i></i></s></div>
							<div class="shop_img" style="background-image: url(img/taobao/taobao_2.jpg);"></div>
							<div class="shop_detail">
								<h2>【侏罗纪IP款】巴拉巴拉女童外套儿童秋装外套女2018厚款防风上衣</h2>
								<h4>红黄色调0368-140CM</h4>
								<h3>¥399</h3>
							</div>
						</dd>
					</dl>
					<dl class="shop_list_5">
						<div class="shop_store"><s></s><em>安怡官方旗舰店</em></div>
						<dd>
							<div class="shop_select"><s><i></i></s></div>
							<div class="shop_img" style="background-image: url(img/taobao/taobao_4.jpg);"></div>
							<div class="shop_detail">
								<h2>仁和咽炎片45片/盒慢性咽炎喉咙痛 镇咳止痒咽痒咳嗽药</h2>
								<h4>800g</h4>
								<h3>¥18</h3>
							</div>
						</dd>
					</dl>
					<dl class="shop_list_6">
						<div class="shop_store"><s></s><em>乐智玩具旗舰店</em></div>
						<dd>
							<div class="shop_select"><s><i></i></s></div>
							<div class="shop_img" style="background-image: url(img/taobao/taobao_6.jpg);"></div>
							<div class="shop_detail">
								<h2>儿童室内篮球架 可升降玩具12周岁</h2>
								<h4>加高加固款  投篮+球门</h4>
								<h3>¥138</h3>
							</div>
						</dd>
					</dl>
				</div>
			</div>
			<div class="ts_top"><img src="img/taobao/ts_top.jpg" /></div>
			<div class="ts_bottom">
				<div class="tsb_btn_box"><div class="tsb_btn">结算</div></div>
				<div class="tsb_img"><img src="img/taobao/ts_bottom.jpg" /></div>
			</div>
		</div>
		<div class="taobao_order">
			<div class="to_middle"><img src="img/taobao/to_middle.jpg" /></div>
			<div class="to_top"><img src="img/taobao/to_top.jpg" /></div>
			<div class="to_bottom">
				<div class="tob_btn"><img src="img/taobao/to_btn.jpg" /></div>
			</div>
		</div>
		<div class="out_box pay_box">
			<div class="pay_done">
				<div class="pd_top"><h2>淘宝支付</h2></div>
				<div class="pd_text">支付成功</div>
				<div class="pd_price">实付 ¥742</div>
				<div class="pd_tips">您的订单（140527923456125）已支付成功。<br />您可以在<em>我的订单</em>中查看或修改您的订单。</div>
				<div class="pd_btn">完成</div>
			</div>
		</div>
	</div>
	<div class="top_pop">
		<div class="pop_wechat_click">
			<div class="pop_wechat">
				<dl>
					<s>现在</s>
					<h4><i class="message_icon"></i><em>信息</em></h4>
					<h2>信用卡提醒</h2>
					<h3>本月账单已出，您的信用卡2018年09月30日为最后还款日</h3>
				</dl>
			</div>
		</div>
	</div>
	<div class="out_box message_box">
		<div class="message">
			<div class="message_top">信用卡提醒</div>
			<div class="message_tips">iMessage信息</div>
			<div class="message_text">本月账单已出，您的信用卡2018年09月30日为最后还款日，本期结欠5980元。请您尽快还款，请勿逾期。【中国银行】</div>
		</div>
	</div>
	<div class="talk keyboard_show">
		<div class="talk_list">
			<dl class="talk_friend_0"></dl>
			<dl class="talk_friend_1"></dl>
			<dl class="talk_friend_2"></dl>
			<dl class="talk_friend_3"></dl>
			<dl class="talk_friend_4"></dl>
			<dl class="talk_friend_5"></dl>
			<dl class="talk_friend_6"></dl>
			<dl class="talk_friend_7"></dl>
			<dl class="talk_friend_8"></dl>
			<dl class="talk_friend_9"></dl>
			<dl class="talk_friend_10"></dl>
			<dl class="talk_friend_11"></dl>
			<dl class="talk_friend_12"></dl>
			<dl class="talk_friend_13"></dl>
			<dl class="talk_friend_14"></dl>
			<dl class="talk_friend_15"></dl>
		</div>
		<div class="talk_top"><dl>三只小仙女</dl></div>
		<div class="talk_bottom_box">
			<div class="talk_bottom">
				<div class="talk_bottom_input talk_write"></div>
			</div>
		</div>
	</div>
</div>

</body>
</html>